import {
    DashboardOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined, SmileOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import {Breadcrumb, Button, Dropdown, Layout, Menu, message} from 'antd';
import React, {useEffect, useState} from 'react';
import {useLocation, useNavigate} from "react-router";
import {doctor} from "../utils/tools";

/*
* 侧边栏的数据
* */
const sideMenuData=[
    {
        key: '/admin/dashboard',
        icon: <DashboardOutlined/>,
        label: '看板',
    },
    {
        key: '/admin/medicine',
        icon: <VideoCameraOutlined/>,
        label: '药品管理',
        children: [
            {
                label: '药品分类',
                key: '/admin/medicine/categories',
            },
            {
                label: '药品信息',
                key: '/admin/medicines/list',
            }
        ],
    },
    {
        key: '/admin/article',
        icon: <UploadOutlined/>,
        label: '文章管理',
        children: [
            {
                label: '文章分类',
                key: '/admin/article/categories',
            },
            {
                label: '文章信息',
                key: '/admin/article/list',
            }
        ]
    },
    {
        key: '/admin/users',
        icon: <UserOutlined/>,
        label: '会员信息',
    },
];

/*
* 查询当前的menu菜单的值
* */
const findOpenKeys=(key)=>{
    /*
    * key 当前路由
    * result 返回的结果
    * arr 侧边栏的key
    * */
    const result=[];
    const findInfo=(arr)=>{
        arr.forEach((item)=>{
            if (key.includes(item.key)){
                result.push(item.key);//如果当前路由包含key,就将key 加入到数组里
                if (item.children){
                    findInfo(item.children);//使用递归的方式查询当前页面刷新后的默认选项
                }
            }
        })
    }
    findInfo(sideMenuData);
    return result;
}
/*
* 面包屑 头部信息导航
* key 当前路由
* result 返回结果
* arr 侧边栏sideMenuData 的数据
*
* */
const findDeepPath=(key)=>{
    const result=[];
    const findInfo=(arr)=>{
        arr.forEach(item=>{
            //解构 item中的值,将children的数据单独
            const {children,...info}=item;
            //将二维数组转为一维数组.
            result.push(info);
            //console.log('info',info);
            if (children){
                findInfo(children);//使用递归的方式,将二维数组转为一维数组
            }
        })
    }
    findInfo(sideMenuData);
    //此时的result已经将侧边栏sideMenuData 的数据转为了一维数组
    const temData=result.filter(item=>key.includes(item.key));
    if (temData.length>0){
        return [{label:'首页',key:'/admin/dashboard'},...temData];
    }
    else {
        return [];
    }

}
export default function MyLayout  ({children}) {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate();
    const {Header, Sider, Content} = Layout;
    const {pathname}=useLocation();
    const [breadcrumbs,setBreadcrumbs]=useState([]);
    //监听pathName的改变.
    useEffect(()=>{
        //
        setBreadcrumbs(findDeepPath(pathname));
    },[pathname]);
    const temOpenKeys=findOpenKeys(pathname);
    const onClick = ({key}) => {
        if (key === 'logOut') {
            navigate('/login');
        } else {
            message.info("暂未开通!")
        }
    };
    const items = [
        {
            label: '个人中心',
            key: 'userCenter'
        },
        {
            label: '退出',
            key: 'logOut'
        }
    ];
    return (
        <Layout style={{width: '100vw', height: '100vh'}} id={'components-layout-demo-custom-trigger'}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo">
                    <img src={doctor} alt="好大夫"/>
                </div>
                {/*菜单栏*/}
                <Menu
                    theme="light"
                    mode="inline"
                    defaultOpenKeys={temOpenKeys}
                    defaultSelectedKeys={temOpenKeys}
                    onClick={({key}) => {
                        navigate(key);
                    }}
                    items={sideMenuData}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                    }}
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <span className={'app-title'}>好大夫管理平台系统</span>
                    <Dropdown menu={{items, onClick}} placement="bottomLeft">
                        {/*<span>超级管理员</span>*/}
                        <img  onClick={(e=>e.preventDefault())} src={doctor} alt="头像" style={{
                            width: '50px',
                            borderRadius: '50%',
                            float: 'right',
                            marginTop: '16px',
                            marginRight: '20px',
                        }}/>
                    </Dropdown>
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    <Breadcrumb>
                        {
                            breadcrumbs.map((item,index)=>(<Breadcrumb.Item key={index}>{item.label}</Breadcrumb.Item>))}
                    </Breadcrumb>
                    {children}
                </Content>
            </Layout>
        </Layout>
    );
};
